/*顶部下拉出现隐藏顶部*/
window.addEventListener("scroll", function () {
  let Top = this.document.querySelector('.appBody').offsetTop
  if (document.documentElement.scrollTop > Top) {
    document.querySelector(".headerHidden").style.top = "0px";
    document.querySelector(".headerHidden").style.transition = 'all .3s'
  } else {
    document.querySelector(".headerHidden").style.top = "-80px";
  }
});

// 轮播图
window.addEventListener("load", function () {
  let timeId = "";
  //左右按钮显示隐藏
  document.querySelector(".banner").addEventListener("mouseenter", function () {
    document.querySelector(".leftButton").style.display = "block";
    document.querySelector(".rightButton").style.display = "block";
    // 点击按钮时清除定时器
    clearInterval(timeId);
  });
  document.querySelector(".banner").addEventListener("mouseleave", function () {
    clearInterval(timeId);
    document.querySelector(".leftButton").style.display = "none";
    document.querySelector(".rightButton").style.display = "none";
    // 添加定时器
    timeId = setInterval(function () {
      document.querySelector(".rightButton").click();
    }, 2000);
  });
  // 点击下一张,上一张图片
  // 小圆点的高亮跟随轮播图
  let index = 0;
  let lis = document.querySelectorAll(".images li");
  let imageLisAll = document.querySelectorAll(".imageLis li");
  document.querySelector(".rightButton").addEventListener("click", function () {
    index++;
    if (index >= lis.length) {
      index = 0;
    }
    for (let i = 0; i < lis.length; i++) {
      lis[i].style.display = "none";
      imageLisAll[i].style.backgroundColor = "";
    }
    lis[index].style.display = "block";
    document.querySelectorAll(".imageLis li")[index].style.backgroundColor =
      "#fff";
  });
  document.querySelector(".leftButton").addEventListener("click", function () {
    index--;
    if (index < 0) {
      index = lis.length - 1;
    }
    for (let i = 0; i < lis.length; i++) {
      imageLisAll[i].style.backgroundColor = "";
      lis[i].style.display = "none";
    }
    lis[index].style.display = "block";
    document.querySelectorAll(".imageLis li")[index].style.backgroundColor =
      "#fff";
  });

  // 轮播图定时器
  timeId = setInterval(function () {
    document.querySelector(".rightButton").click();
  }, 3000);
  //点击小圆点的高亮
  document.querySelectorAll(".imageLis li").forEach((e) => {
    e.addEventListener("click", function () {
      let id = e.dataset.id;
      index = +id;
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.display = "none";
        imageLisAll[i].style.backgroundColor = "";
      }
      lis[index].style.display = "block";
      document.querySelectorAll(".imageLis li")[index].style.backgroundColor =
        "#fff";
    });
  });

  // 左侧侧边栏点击呼出对应页面
  document.querySelectorAll(".leftNave li").forEach((e) => {
    e.addEventListener("mouseenter", function () {
      e.style.backgroundColor = "#27ba9b";
      document.querySelector(".layer").style.display = "block";
    });
    e.addEventListener("mouseleave", function () {
      e.style.backgroundColor = "";
    });
    document
      .querySelector(".banner")
      .addEventListener("mouseleave", function () {
        document.querySelector(".layer").style.display = "none";
      });
  });
});

//热门品牌商品切换
window.addEventListener("load", function () {
  let prev = document.querySelector(".prev");
  let next = this.document.querySelector(".next");
  // 左侧按钮点击
  prev.addEventListener("click", function () {
    document.querySelector(".goods2").style.display = "none";
    document.querySelector(".goods1").style.display = "block";
    this.style.backgroundColor = "#ccc";
    // next.style.backgroundColor = "rgb(39, 186, 155)";
    this.style.cursor = "not-allowed";
    next.style.cursor = "pointer";
  });
  // 右侧侧按钮点击
  next.addEventListener("click", function () {
    document.querySelector(".goods1").style.display = "none";
    document.querySelector(".goods2").style.display = "block";
    this.style.backgroundColor = "#ccc";
    // prev.style.backgroundColor = "rgb(39, 186, 155)";
    this.style.cursor = "not-allowed";
    prev.style.cursor = "pointer";
  });
});
/* xuzhe 修改 */
let renderStr = ''
let start = 0
let end = 0
function asideRender() {
  document.querySelector('.toggleLayer').innerHTML = ''
  renderStr = ''
  for (let i = start; i < end; i++) {
    renderStr += `<li>
                    <a href="./html/detailList.html">
                        <img src="${goodsList1[i].picture}" alt="">
                        <p>${goodsList1[i].name}</p>
                        <p>${goodsList1[i].desc}</p>
                        <p>￥${goodsList1[i].price}</p>
                    </a>
                </li>`
  }
  document.querySelector('.toggleLayer').innerHTML = renderStr
}
// asideRender()
let lis = document.querySelectorAll('.leftNave li')
let flag = true
document.querySelector(".bannerImage").addEventListener('mouseover', function (e) {
  if (e.target.tagName == 'LI') {
    for (let i = 0; i < lis.length; i++) {
      lis[i].style.backgroundColor = ''
    }
    e.target.style.backgroundColor = '#27ba9b'
    document.querySelector('.layer').style.display = 'block'
  }
  start = e.target.dataset.name * 9
  end = +start + 9
  if (e.target.dataset.name) {
    asideRender()
  }
})
document.querySelector(".bannerImage").addEventListener('mouseleave', function () {
  for (let i = 0; i < lis.length; i++) {
    lis[i].style.backgroundColor = ''
  }
  document.querySelector('.layer').style.display = 'none'
})
// 头部切换
document.querySelector('.shortcut').addEventListener('click', function (e) {
  console.log(e.target.tagName);
  if (e.target.tagName === 'A') {
    if (e.target.dataset.war === '0') {
      window.location.href = "./html/login.html";
    } else if (e.target.dataset.war === '1') {
      window.location.href = "./html/register.html";
    } else if (e.target.dataset.war === '2') {
      window.location.href = "./html/personage.html";
    }
  }
})
//登录注册内容主页显示
let yourname=localStorage.getItem('uname')
if(yourname){
  document.querySelector('.yourname').innerHTML=yourname
  document.querySelector('#quit1').style.display='none'
  document.querySelector('#quit2').style.display='block'
}else{
  document.querySelector('.yourname').innerHTML=请先登录
  document.querySelector('#quit1').style.display='block'
  document.querySelector('#quit2').style.display='none'
}